<template>
  <view class="loadmore">
    <view class="loadmore" v-if="status === 'loading'">
      <up-loading-icon />
      数据加载中...
    </view>
    <view class="loadmore" v-if="status === 'loadmore'">上拉加载更多</view>
    <view class="loadmore" v-if="status === 'nomore'">已展示全部</view>
    <view class="loadmore Error" v-if="status === 'error'" @click="() => emit('reload')"
      >加载失败，点击重新加载</view
    >
  </view>
</template>

<script setup lang="ts">
defineProps({
  status: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['reload'])
</script>

<style lang="scss" scoped>
.loadmore {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 24rpx;
  line-height: 24rpx;
  color: $uni-text-color-grey;
}

@keyframes rot {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
  animation: rot 1s linear 0s infinite normal;
}
</style>
